import type { CSSProperties } from "@vanilla-extract/css"

export const percent = (value: number) => `${value}%`
export const rem = (value: number) => `${value}rem`
export const em = (value: number) => `${value}em`
export const px = (value: number) => `${value}px`
export const vw = (value: number) => `${value}vw`
export const vh = (value: number) => `${value}vh`
export const s = (value: number) => `${value}s`
export const ms = (value: number) => `${value}ms`

export type CssVariablePair = {
  readonly get: string
  readonly set: string
}

export const cssVariable = (name: string): CssVariablePair => ({
  get: `var(--${name})`,
  set: `--${name}`,
})

export const calc = (expression: string) => `calc(${expression})`

export function colorMix(colorSpace: string, color1: string, percentage: number, color2: string) {
  return `color-mix(in ${colorSpace}, ${color1} ${percentage}%, ${color2})`
}

export function border(width: string, style: CSSProperties["borderStyle"], color: string) {
  return [width, style, color].join(" ")
}

/**
 * 将多个 CSS 选择器连接成一个字符串。
 *
 * 1. 使用逗号和空格作为分隔符连接所有选择器。
 * 2. 支持任意数量的选择器参数。
 * 3. 常用于组合多个 CSS 选择器。
 * 4. 推荐使用 `import {selectors as s}` 别名导入以压缩行宽。
 *
 * @param selector - 要连接的 CSS 选择器数组。
 * @returns 用逗号和空格分隔的选择器字符串。
 */
export const selectors = (...selector: string[]) => selector.join(", ")
